<template>
	<!-- item.status == 0 已使用或者已过期 -->
	<!-- item.status == 1 待使用 -->
	<view class="ticketItem">
		<view class="ticket_title">优惠券</view>
		
		<view class="ticket_part" v-for="(item,index) in ticket" :key="index" :class="item.status == 0 || item.status == 1 ? 'box_shadow' : ''" v-show="item.name == '优惠券'">
			<!-- <view class="" v-show="!item.name == '优惠券'">1111111</view> -->
			<view class="ticket_info" :class="item.status == 0 ? 'change_bg' :  item.status == 1 ? 'border_radius': ''" >
				<view class="left">
					<p>{{ item.text }}</p>
					<view class="integral">
						<span class="span_left">{{ item.num }}</span>
						<span class="span_middle">积分</span>
						<span class="span_right">{{ item.num1 }}</span>
					</view>
				</view>
				<view class="right">
					<view class="button" @click="toPage(item.url,item.text1)" v-if="item.button_status == 0">兑换</view>
					<view class="button" @click="toPage(item.url,item.text1)" v-if="item.button_status == 1">使用</view>
				</view>
			</view>
		</view>
		<view class="ticket_title">通用卷</view>
		<view class="" v-for="(item,index) in ticket" :key="index" v-show="!item.name == '通用卷'">暂无通用卷</view>
		<view class="ticket_part" v-for="(item,index) in ticket" :key="index" :class="item.status == 0 || item.status == 1 ? 'box_shadow' : ''" v-show="item.name == '通用卷'">
			<view class="ticket_info" :class="item.status == 0 ? 'change_bg' :  item.status == 1 ? 'border_radius': ''" >
				<view class="left">
					<p>{{ item.text }}</p>
					<view class="integral">
						<span class="span_left">{{ item.num }}</span>
						<span class="span_middle">积分</span>
						<span class="span_right">{{ item.num1 }}</span>
					</view>
				</view>
				<view class="right">
					<view class="button" @click="toPage(item.url,item.text1)" v-if="item.button_status == 0">兑换</view>
					<view class="button" @click="toPage(item.url,item.text1)" v-if="item.button_status == 1">使用</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			ticket: {
				type: Array,
				default: [],
			},
		},
		components: {},
		data() {
			return {};
		},
		computed: {},
		methods: {
			toPage(val, text) {
				this.$emit('jump', val, text)
			}
		},
		beforeCreate() {},
		created() {},
		beforeMount() {},
		mounted() {},
		beforeUpdate() {},
		updated() {},
		beforeDestroy() {},
		destroyed() {},
	};
</script>
<style scoped lang='scss'>
	@import "./index.scss";

	.ticket_title {
		padding: 32rpx 0 32rpx;
		font-size: 24rpx;
		color: #666;
	}

	.box_shadow {
		box-shadow: 4rpx 8rpx 24rpx 0px rgba(0, 0, 0, 0.08) !important;
	}

	.change_bg {
		border-radius: 16rpx 16rpx 16rpx 16rpx !important;
		background-image: url(/static/img/card_04.png) !important;
		background-color: #bbb;

		.right {
			.button {
				color: #999 !important;
			}
		}
	}

	.border_radius {
		border-radius: 16rpx 16rpx 16rpx 16rpx  !important;
	}
</style>
